<template>
  <div>
    <div style="margin-bottom:10px">
      <Card dis-hover>
        <Form ref="queryForm" :label-width="80" label-position="left" inline>
          <Row>
            <Button @click="create" icon="md-add" type="primary">{{L('Add')}}</Button>
            <Button @click="edit" icon="md-create" class="toolbar-btn">{{L('Edit')}}</Button>
            <Button
              @click="del"
              icon="md-trash"
              type="error"
              ghost
              class="toolbar-btn"
            >{{L('Delete')}}</Button>
            <Button
              @click="createEle"
              icon="md-add"
              type="primary"
              class="toolbar-btn"
            >{{L('AddElement')}}</Button>
            <Button @click="editEle" icon="md-create" class="toolbar-btn">{{L('EditElement')}}</Button>
            <Button
              @click="delEle"
              icon="md-trash"
              type="error"
              ghost
              class="toolbar-btn"
            >{{L('DeleteElement')}}</Button>
          </Row>
        </Form>
      </Card>
    </div>
    <Row :gutter="6">
      <i-col span="15">
        <Card dis-hover>
          <div class="page-body">
            <div class="margin-top-10">
              <i-table
                highlight-row
                row-key="id"
                :columns="columns"
                :no-data-text="L('NoDatas')"
                border
                :data="listTree"
                @on-row-click="rowClick"
              ></i-table>
            </div>
          </div>
        </Card>
      </i-col>
      <i-col span="9">
        <Card dis-hover>
          <div class="page-body">
            <div class="margin-top-10">
              <i-table
                highlight-row
                :columns="columnsEle"
                :no-data-text="L('NoDatas')"
                border
                :data="listEleDate"
                @on-row-click="rowClickEle"
              ></i-table>
              <Page
                show-sizer
                class-name="fengpage"
                :total="totalCount"
                class="margin-top-10"
                @on-change="pageChange"
                @on-page-size-change="pagesizeChange"
                :page-size="pageSize"
                :current="currentPage"
              ></Page>
            </div>
          </div>
        </Card>
      </i-col>
    </Row>
    <create-uiMent
      :permissionTree="permissionTree"
      v-model="createModalShow"
      @save-success="saveSuccess"
    ></create-uiMent>
    <CreateMentEle
      :permissionTree="permissionEleTree"
      v-model="createEleModalShow"
      @save-success="saveSuccessEle"
    ></CreateMentEle>
    <edit-uiMent
      :permissionTree="permissionTree"
      v-model="editModalShow"
      @save-success="saveSuccess"
    ></edit-uiMent>
    <EditUiMentEle
      :permissionTree="permissionEleTree"
      v-model="editEleModalShow"
      @save-success="saveSuccessEle"
    ></EditUiMentEle>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import AbpBase from "@/lib/abpbase";
import PageRequest from "@/store/entities/page-request";
import CreateUiMent from "./create-uiMent.vue";
import CreateMentEle from "./create-uiMentEle.vue";
import EditUiMent from "./edit-uiMent.vue";
import EditUiMentEle from "./edit-uiMentEle.vue";
class PageUserRequest extends PageRequest {
  keyword: string;
  isActive: boolean = null; //nullable
  from: Date;
  to: Date;
}

@Component({
  components: { CreateUiMent, EditUiMent, CreateMentEle, EditUiMentEle }
})
export default class uiMenus extends AbpBase {
  //filters
  pagerequest: PageUserRequest = new PageUserRequest();
  creationTime: Date[] = [];

  createModalShow: boolean = false;
  createEleModalShow: boolean = false;
  editModalShow: boolean = false;
  editEleModalShow: boolean = false;
  permissionTree = [];
  permissionEleTree = []; //权限树
  currentRowUiMenu = null; //选中的行
  currentRowUiMenuEleMenu = null; //选中元素的行
  listTree = [];
  listEleDate = [];
  columns = [
    {
      title: this.L("UiMenu.DisplayName"),
      tree: true,
      key: "displayName",
      render: (h, params) => {
        return h("span", this.L(params.row.displayName));
      }
    },
    {
      title: this.L("UiMenu.PermissionKey"),
      key: "permissionKey"
    },
    {
      title: this.L("UiMenu.Path"),
      key: "path"
    }
  ];
  columnsEle = [
    {
      title: this.L("UiMenu.Name"),
      key: "displayName",
      render: (h, params) => {
        return h("span", this.L(params.row.displayName));
      }
    },
    {
      title: this.L("UiMenu.PermissionKey"),
      key: "permissionKey"
    }
  ];

  get list() {
    return this.$store.state.uiMenu.list;
  }

  async getPermissionTree() {
    var req = await this.$store.dispatch({
      type: "uiMenu/getPermissionTree"
    });
    this.permissionTree = [req];
    this.permissionEleTree = req.children;
  }
  async getlistTree() {
    //模块列表
    var req = await this.$store.dispatch({
      type: "uiMenu/getpageTree"
    });
    this.listTree = req;
  }
  async getlistEleData() {
    //模块元素列表
    var req = await this.$store.dispatch({
      type: "uiMenu/getElePaged",
      data: this.currentRowUiMenu
    });
    this.listEleDate = req.items;
  }

  create() {
    this.createModalShow = true;
  }
  createEle() {
    this.createEleModalShow = true;
  }
  edit() {
    this.editModalShow = true;
  }
  editEle() {
    this.editEleModalShow = true;
  }
  async del() {
    console.log(this.listEleDate.length);
    if (this.currentRowUiMenu == null) {
      this.$Message.error("请选择需要删除的模块");
    } else if (
      this.currentRowUiMenu.children == null ||
      this.currentRowUiMenu.children.length == 0
    ) {
      if (this.listEleDate.length == 0 || this.listEleDate == null) {
        await this.$store.dispatch({
          type: "uiMenu/delete",
          data: this.currentRowUiMenu
        });
        this.$Notice.success({
          title: "成功",
          desc: "删除成功."
        });
        this.getlistTree();
      } else {
        this.$Notice.warning({
          title: "警告",
          desc: "有元素模块，不能删除."
        });
      }
    } else {
      this.$Notice.warning({
        title: "警告",
        desc: "有下级模块，不能删除."
      });
    }
  }
  async delEle() {
    if (this.currentRowUiMenuEleMenu == null) {
      this.$Message.error("请选择需要删除的元素模块");
    } else {
      await this.$store.dispatch({
        type: "uiMenu/deleteEle",
        data: this.currentRowUiMenuEleMenu
      });
      this.$Notice.success({
        title: "成功",
        desc: "删除成功."
      });
      this.getlistEleData();
    }
  }
  rowClick(row, index) {
    //行点击事件
    //console.log(row)
    this.currentRowUiMenu = row;
    this.$store.commit("uiMenu/edit", row);
    this.getlistEleData();
  }
  rowClickEle(row, index) {
    //行点击事件
    this.currentRowUiMenuEleMenu = row;
    this.$store.commit("uiMenu/editEle", row);
  }

  isActiveChange(val: string) {
    //console.log(val);
    if (val === "Actived") {
      this.pagerequest.isActive = true;
    } else if (val === "NoActive") {
      this.pagerequest.isActive = false;
    } else {
      this.pagerequest.isActive = null;
    }
  }
  pageChange(page: number) {
    this.$store.commit("user/setCurrentPage", page);
    this.getpage();
  }
  saveSuccess() {
    this.getpage();
    this.getlistTree();
    this.getPermissionTree();
  }
  saveSuccessEle() {
    //新增编辑 成功后事件
    this.getlistEleData();
  }
  pagesizeChange(pagesize: number) {
    this.$store.commit("user/setPageSize", pagesize);
    this.getpage();
  }

  async getpage() {
    this.pagerequest.maxResultCount = this.pageSize;
    this.pagerequest.skipCount = (this.currentPage - 1) * this.pageSize;
    //filters

    if (this.creationTime.length > 0) {
      this.pagerequest.from = this.creationTime[0];
    }
    if (this.creationTime.length > 1) {
      this.pagerequest.to = this.creationTime[1];
    }

    await this.$store.dispatch({
      type: "user/getAll",
      data: this.pagerequest
    });
  }
  get pageSize() {
    return this.$store.state.user.pageSize;
  }
  get totalCount() {
    return this.$store.state.user.totalCount;
  }
  get currentPage() {
    return this.$store.state.user.currentPage;
  }

  async created() {
    this.getPermissionTree();
    this.getpage();

    this.getlistTree();
    await this.$store.dispatch({
      type: "user/getRoles"
    });
  }
}
</script>